<template>
  <div class="h-full">
    <n-card title="分单配置" :bordered="false" class="h-full rounded-8px shadow-sm">
      <n-space class="pb-12px" justify="space-between">
        <n-space>
          <n-input-group>
            <n-input-group-label>产品分类：</n-input-group-label>
            <n-select v-model:value="productValue" filterable :options="productOption" :style="{ width: '120px' }" />
          </n-input-group>

          <n-input-group>
            <n-input-group-label>店铺：</n-input-group-label>
            <n-select v-model:value="sizeValue" filterable :options="sizeOption" :style="{ width: '120px' }" />
          </n-input-group>

          <n-input-group>
            <n-input-group-label>设计形式：</n-input-group-label>
            <n-select v-model:value="styleValue" filterable :options="styleOption" :style="{ width: '120px' }" />
          </n-input-group>

          <n-button type="primary" ghost>查询</n-button>
        </n-space>
        <n-space align="center" :size="18">
          <n-button type="success">
            <icon-uil:export class="mr-4px text-20px" />
            数据导出
          </n-button>
          <n-button type="primary">数据导入</n-button>
        </n-space>
      </n-space>

      <n-data-table :columns="columns" :data="data" :pagination="pagination" class="flex-1-hidden py-12px" />
    </n-card>
  </div>
</template>

<script setup lang="tsx">
import { h, reactive, ref } from 'vue';
import type { PaginationProps } from 'naive-ui';
import { NSpace, NButton, NPopconfirm, NInputNumber } from 'naive-ui';
// import { useLoading } from '@/hooks';

// const { loading, startLoading, endLoading } = useLoading(false);
const createData = () => [
  {
    product: '折扣券',
    size: '益好旗舰店',
    type: '套版设计'
  }
];
const data = ref(createData());
const pagination: PaginationProps = reactive({
  page: 1,
  pageSize: 10,
  showSizePicker: true,
  pageSizes: [10, 15, 20, 25, 30],
  onChange: (page: number) => {
    pagination.page = page;
  },
  onUpdatePageSize: (pageSize: number) => {
    pagination.pageSize = pageSize;
    pagination.page = 1;
  }
});
const columns = ref([
  {
    key: 'product',
    title: '产品',
    align: 'center'
  },
  {
    key: 'size',
    title: '店铺名称',
    align: 'center'
  },
  {
    key: 'type',
    title: '设计样式',
    align: 'center'
  },
  {
    key: 'actions',
    title: '操作',
    align: 'center',
    render: row => {
      return (
        <NSpace justify={'center'}>
          <NButton ghost>配置</NButton>
        </NSpace>
      );
    }
  }
]);

const productValue = ref('全部');
const productOption = [
  {
    label: '全部',
    value: 1
  },
  {
    label: '名片',
    value: 2
  }
];

const sizeValue = ref('全部');
const sizeOption = [
  {
    label: '全部',
    value: 1
  },
  {
    label: '益好旗舰店',
    value: 2
  }
];

const styleValue = ref('全部');
const styleOption = [
  {
    label: '全部',
    value: 1
  },
  {
    label: '套版设计',
    value: 2
  }
];
</script>

<style scoped></style>
